<template>
  <div class="conWidth">
    <Navigation :id="3" v-show="!isAnimation" />
    <div class="blogArticle_box">
      <div
        class="article_box flexbox"
        :class="isAnimation ? 'leftAnimation' : 'rightAnimation'"
      >
        <div class="article_list" style="width: 100%">
          <ul class="blogArticle">
            <li v-for="(item, index) in article_list" :key="index">
              <div class="top"></div>
              <h2>{{ item.title }}</h2>
              <p class="two-hidden" v-html="item.content"></p>
              <span @click="toArticle(item.id)">阅读全文</span>
            </li>
          </ul>
          <!-- 分页器 -->
          <pagination
            :total="total"
            @pagination="pagination"
            @handleSizeChange="handleSizeChange"
          />
        </div>
        <div class="article" style="width: 100%">
          <div class="logo"><img :src="imgHost + webSetUp.logo" alt="" /></div>
          <div class="attribute_box">
            <i class="el-icon-back" @click="isAnimation = false"></i>
            <h2>{{ article.title }}</h2>
            <div class="flexbox attribute">
              <div class="date centerBox">
                <i class="el-icon-date"></i>
                <span>{{ article.time }}</span>
              </div>
              <div class="see centerBox">
                <i class="el-icon-collection-tag"></i>
                <span>{{ article.category_name }}</span>
              </div>
            </div>
            <div v-html="article.content">123</div>
          </div>
        </div>
      </div>
    </div>
    <loading ref="loading" />
    <Footer class="footer" />
  </div>
</template>

<script>
import Navigation from "@/components/Navigation/index.vue";
import Footer from "@/components/footer/footer.vue";
import Pagination from "@/components/Pagination/index.vue";
const loading = () => import("@/components/loading/index.vue");
import { scrollTo } from "@/scroll-to.js";
export default {
  components: { Navigation, Footer, Pagination, loading },
  data() {
    return {
      queryForm: {
        size: 5,
        current: 1,
      },
      article_list: [],
      total: 0,
      article: {},
      webSetUp: {},
      isAnimation: false,
    };
  },
  created() {
    this.webSetUp = JSON.parse(localStorage.getItem("webSetUp"));
    this.query();
  },
  methods: {
    query() {
      this.$load.show();
      this.$http.get("/article", { params: this.queryForm }).then((res) => {
        console.log(res);
        this.$load.close();
        this.total = res.page.total;
        this.article_list = res.data;
      });
    },
    // 分页事件
    pagination({ page: current, limit: size }) {
      this.queryForm.current = current;
      this.query();
    },
    handleSizeChange({ page: current, limit: size }) {
      this.queryForm.size = size;
      this.query();
    },
    toArticle(id) {
      // this.$router.push("/article/" + id);
      this.$load.show();
      scrollTo(0);
      this.articleDetails(id);
    },
    articleDetails(id) {
      this.$http
        .get("articlelist", { params: { id } })
        .then((result) => {
          this.$load.close();
          this.article = result.data[0];
          this.isAnimation = true;
        })
        .catch((err) => {
          this.$message.success(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.conWidth {
  height: 100%;
}
.blogArticle_box {
  overflow: hidden;
}
.article_box {
  position: relative;
}
.blogArticle {
  padding-top: 23%;
  margin-bottom: 100px;
  li {
    padding-right: 35%;
    margin-bottom: 40px;
    .top {
      width: 50px;
      border-top: 2px solid #18191b;
      margin-bottom: 30px;
    }
    h2 {
      margin: 20px 0;
    }
    p {
      line-height: 22px;
    }
    span {
      color: #e94328;
      cursor: pointer;
      margin-top: 25px;
      display: block;
    }
  }
}
.logo {
  text-align: center;
  img {
    width: 200px;
    height: 200px;
  }
}
.el-icon-back {
  font-size: 24px;
  cursor: pointer;
}
.article {
  position: absolute;
  transform: translateX(100%);
  padding: 0 20px;
  h2 {
    margin: 30px 0 20px;
    font-size: 30px;
  }
  .attribute {
    & > div {
      margin-right: 10px;
      margin-bottom: 10px;
      i {
        margin-right: 5px;
      }
    }
  }
}
.leftAnimation {
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}
.rightAnimation {
  transform: translateX(0);
  transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}
</style>